import React from 'react';
import { NavigationContainer, useNavigation, useRoute } from '@react-navigation/native';
import { createStackNavigator, CardStyleInterpolators, TransitionSpecs } from '@react-navigation/stack';
import { navigationRef, isReadyRef } from './navigation';
import SCREENS from './routers';
import { Platform } from 'react-native';

export { useNavigation, useRoute };

type StackParamList = {
    Main: undefined;
} & {
    [P in keyof typeof SCREENS]: undefined;
};

const Stack = createStackNavigator<StackParamList>();
export default (props: any) => {
    return (
        <NavigationContainer
            ref={navigationRef}
            onReady={() => {
                isReadyRef.current = true;
            }}
            linking={{ prefixes: [`monitore://`] }}>
            <Stack.Navigator
                initialRouteName={'StartPage'}
                screenOptions={{
                    gestureEnabled: false, // 在所有页面禁用
                    gestureDirection: 'vertical',
                }}>
                {(Object.keys(SCREENS) as (keyof typeof SCREENS)[]).map((routeName) => (
                    <Stack.Screen
                        key={routeName}
                        name={routeName}
                        component={SCREENS[routeName].component}
                        options={{
                            gestureEnabled: false, // 全局禁用
                            headerShown: false,
                            // gestureEnabled: ['Login'].includes(routeName) ? false : true, // 确保正确应用
                            ...(['BuyMall', 'AiActivation'].includes(routeName)
                                ? TransitionYScreen
                                : TransitionXScreen),
                        }}
                    />
                ))}
            </Stack.Navigator>
        </NavigationContainer>
    );
};

const TransitionXScreen = {
    gestureDirection: 'horizontal',
    transitionSpec: {
        open: TransitionSpecs.TransitionIOSSpec,
        close: TransitionSpecs.TransitionIOSSpec,
    },
    cardStyleInterpolator: ({ current, next, layouts }: any) => {
        return {
            cardStyle: {
                transform: [
                    {
                        translateX: current.progress.interpolate({
                            inputRange: [0, 1],
                            outputRange: [layouts.screen.width, 0],
                        }),
                    },
                    {
                        translateX: next
                            ? next.progress.interpolate({
                                  inputRange: [0, 1],
                                  outputRange: [0, -layouts.screen.width],
                              })
                            : 0,
                    },
                ],
            },
            overlayStyle: {
                opacity: current.progress.interpolate({
                    inputRange: [0, 1],
                    outputRange: [0, 0.5],
                }),
            },
        };
    },
};

const TransitionYScreen = {
    gestureDirection: 'vertical',
    transitionSpec: {
        open: TransitionSpecs.TransitionIOSSpec,
        close: TransitionSpecs.TransitionIOSSpec,
    },
    cardStyleInterpolator:
        Platform.OS === 'ios'
            ? CardStyleInterpolators.forVerticalIOS
            : CardStyleInterpolators.forRevealFromBottomAndroid,
};
